<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="../../css/XitongGuanlicss/xiTong.css">
<link rel="stylesheet" href="../../iconfont/iconfont.css">
<script src="../../lib/jquery/jquery-3.6.0.js"></script>
</head>

<body>
    <div id="sousuo" class="clear">
        <input type="text" placeholder="   方案ID" class="left">
        <input type="text" placeholder="   方案名称" class="left">
        <select class="left">
            <option value="">状态</option>
            <option value="">启用</option>
            <option value="">禁用</option>
        </select>
        <div id="chongzhi" class="right">
            <span class="iconfont icon-zhongzhi"></span>
            <span>重置</span>
        </div>
        <div id="chaxun" class="right">
            <span class="iconfont icon-search2"></span>
            <span>查询</span>
        </div>
    </div>

    <!-- 表头 -->
    <div id="table_cell" class="clear">
        <div id="xinzeng">
            <span class="iconfont icon-jiahao"></span>
            <span>新增</span>
        </div>

        <table border="1" cellspacing="0">
            <tr>
                <th>序号</th>
                <th>方案ID</th>
                <th>方案名称</th>
                <th>状态</th>   <!-- 4 -->
                <th>备注</th> 
                <th>创建人</th>
                <th>创建时间</th>  <!-- 7 -->
                <th>更新人</th>
                <th>创建时间</th>
                <th>操作</th> 
            </tr>
        </table>

        <!-- 表页码 -->
        <div id="yema" class="clear right">
            <div><span class="iconfont icon-zuojiantou"></span></div>
            <div><span>1</span></div>
            <div><span>2</span></div>
            <div><span>3</span></div>
            <div><span>4</span></div>
            <div><span>5</span></div>
            <div><span>...</span></div>
            <div><span>50</span></div>
            <div><span class="iconfont icon-youjiantou"></span></div>
            <div><span>10条/页</span><span class="iconfont icon-shanglajiantou"></span></div><!--10-->
        </div>
    </div>
</body>

<script>
    $('#sousuo').css({"background-color":"white","height":"100px","padding":"0 2% 0 2%","border":"1px solid #c1c1c1"});
    $('#sousuo input,#sousuo select,#sousuo div').css({"height":"35px","margin-top":"33px","border":"1px solid #c1c1c1","border-radius":"5px"});
    $('#sousuo input,#sousuo select').css({"margin-right":"30px","width":"150px"});
    $('#sousuo select').css({"color":"grey"});
    $('#sousuo div').css({"width":"80px","margin-left":"10px","line-height":"35px","text-align":"center","font-size":"14px"});
    //查询按钮
    $('#sousuo #chaxun').css({"background-color":"#1684fe","color":"white"});
    $('#sousuo #chaxun span:first-child').css({"font-size":"18px"});
    //重置按钮
    $('#sousuo #chongzhi').css({"color":"#8c8c8c"});
    $('#sousuo #chongzhi span:first-child').css({"font-size":"14px"});

    //表
    $('#table_cell').css({"background-color":"white","padding":"0 2% 10px 2%","border":"1px solid #c1c1c1"});
    //新增按钮
    $('#table_cell #xinzeng').css({
        "width":"90px","height":"35px","line-height":"35px","margin":"25px 0 15px 0","border":"1px solid #c1c1c1","border-radius":"5px",
        "background-color":"#1684fe","color":"white","text-align":"center","font-size":"15px"
        });
    $('#table_cell #xinzeng span:first-child').css({"font-weight":"bold","font-size":"18px"});

    //表样式
    $('#table_cell table').css({"border":"1px solid #c1c1c1","margin-bottom":"100px"});
    $('#table_cell table th').css({"padding":"10px 0 10px 10px","background-color":"#f8f8f9","color":"#666666","font-size":"14px","border":"1px solid #c1c1c1"});

    //表页码
    $('#table_cell #yema div').addClass("left");
    $('#table_cell #yema div').css({"border":"1px solid #c1c1c1","color":"#9f9999","height":"30px","line-height":"30px","text-align":"center"});
    $('#table_cell #yema div:not(:nth-child(10))').css({"margin-left":"5px","width":"30px"});
    $('#table_cell #yema div:nth-child(10)').css({"width":"90px","margin-left":"10px"});
</script>
<script src="../../js/xiTongGuanLijs/quanXian.js"></script>
</html>